<template>
  <div class="container">
    <div v-show="showContent">
      <x-header @on-click-back="toback" :left-options="{preventGoBack:true}" title="slot:overwrite-title">
        <div class="title-search flex-row" slot="overwrite-title">
          <div class="input-box" @click="showSearch">
            <input v-model="inputVal" type="text">
          </div>
        </div>
        <div @click="showSearch" slot="right" class="search-btn flex-grow-0 flex-x-center flex-y-center">搜索</div>
      </x-header>
      <div class="select-nav flex-row vux-1px-b">
        <div @click="selectListClick(index)" class="tab-list flex-grow-1 flex-x-center flex-y-center"
             v-for="(item,index) in tabs">
          <span>{{item}}</span>
          <span class="img-down"></span>
          <!--<img class="img-down" style="width: .18rem" v-src="'/static/img/icon-sort-down.png'" alt="">-->
        </div>
      </div>
      <!-- :class="{'red':item!=='区域' || item!=='价格' || item!=='面积' || item!=='户型'}" -->
      <div v-transfer-dom>
        <popup v-model="showSelectContent" position="right">
          <div class="checkerbox" v-if="tabsIndex==0">
            <checklist title="区域筛选" :max="1" :label-position="labelPosition" required :options="areaList"
                       v-model="checklistArea"
                       @on-change="areaChange"></checklist>
          </div>
          <div class="checkerbox" v-if="tabsIndex==1 && this.label=='二手房' || this.label=='新房'">
            <checklist title="价格筛选" :max="1" :label-position="labelPosition" required :options="priceList"
                       v-model="checklistPrice"
                       @on-change="priceChange"></checklist>
            <!--<div>自定义</div>-->
            <!--<div class="flex-row">-->
            <!--<div><input placeholder="最低价" type="text">-<input placeholder="最高价" type="text"></div>-->
            <!--</div>-->
            <!--<div>确定</div>-->
          </div>
          <div class="checkerbox" v-if="tabsIndex==1 && this.label=='租房'">
            <checklist title="价格筛选" :max="1" :label-position="labelPosition" required :options="priceList2"
                       v-model="checklistPrice"
                       @on-change="priceChange"></checklist>
          </div>
          <div class="checkerbox" v-if="tabsIndex==2">
            <checklist title="面积筛选" :max="1" :label-position="labelPosition" required :options="m_j_List"
                       v-model="checklistMJ"
                       @on-change="mjChange"></checklist>
          </div>
          <div class="checkerbox" v-if="tabsIndex==3">
            <checklist title="户型筛选" :max="1" :label-position="labelPosition" required :options="h_x_List"
                       v-model="checklistHx"
                       @on-change="hxChange"></checklist>
          </div>
        </popup>
      </div>
      <house-list :label="label" @click.native="toDetails(item.id)" :item="item" :key="index"
                  v-for="(item,index) in houseList"></house-list>

    </div>
    <house-search
            @on-cancel="onCancel"
            @on-submit="onSubmit"
            :sendVal="sendVal"
            :label="label"
            v-show="!showContent"></house-search>


    <div class="no_data" v-show="show_no_data">---- 暂无相关房源信息 ----</div>
    <div v-if="showLoading" class="" style="text-align: center;height: 1rem;line-height: 1rem">正在加载中····</div>
    <div v-if="show_no_more" class="" style="text-align: center;height: 1rem;line-height: 1rem">---- 亲~已经到底了 ----</div>
    <go-top :showBottom="toTop"></go-top>
    <!--<tab-bar :activeIndex="activeIndex"></tab-bar>-->
  </div>
</template>

<script>
  var mo = function (e) {
    e.preventDefault();
  };
  import MDUtil from 'src/assets/js/md-utils'
  import {URI_GETHOUSELIST, GETWXCONFIG} from 'src/const/shareUri'
  import HouseList from 'src/components/houseList'
  import HouseSearch from 'src/components/HouseSearch'
  import GoTop from 'src/components/toTop'
  // import TabBar from 'src/components/TabBar'
  import wx from 'weixin-js-sdk'
  import {TransferDom, Popup, Checklist, XHeader} from 'vux'

  export default {
    name: "SecondHouse",
    directives: {TransferDom},
    components: {HouseList, Popup, Checklist, XHeader, HouseSearch, GoTop},
    data() {
      return {
        activeIndex: 1,
        show_no_data: false,
        label: '',
        showContent: true,
        sendVal: '',
        inputVal: '',
        tabList: '',
        houseList: [],
        tabs: ['区域', '价格', '面积', '户型'],
        labelPosition: 'left',
        checklistArea: [],
        areaList: ['不限', '孝南'],
        checklistPrice: [],
        priceList: ['不限', '10万以下', '10-15万', '15-20万', '20-30万', '30-40万', '40-60万', '60-100万', '100万以上'],
        priceList2: ['不限', '200以下', '200-400', '400-700', '700-1000', '1000-1500', '1500-2000', '2000-3000', '3000以上'],
        checklistMJ: [],
        m_j_List: ['不限', '50㎡以下', '50-70㎡', '70-90㎡', '90-110㎡', '110-130㎡', '130-150㎡', '150-200㎡', '200-300㎡', '300㎡以上'],
        checklistHx: [],
        h_x_List: ['不限', '一室', '两室', '三室', '四室', '五室', ' 五室以上'],
        tabsIndex: 0,
        showSelectContent: false,
        click: -1,
        show9: false,
        quyu: '',
        mianji: '',
        totalPrice: '',
        huxing: '',
        page: 1,
        pageSize: 10,
        sw: true,
        show_no_more: false,
        showLoading: false,
        toTop: false
      }
    },
    watch: {
      'showSelectContent'(val) {
        if (val) {
          //document.body.style.overflow = 'hidden';
          this.stop();
        } else {
          //document.body.style.overflow = '';
          this.move();
        }
      },
      'houseList'(val) {
        if (val && val.length > 0) {
          this.show_no_data = false;
        } else {
          this.show_no_data = true;
        }
      }
    },
    created() {
      this.inputVal = MDUtil.getQueryParam('key');
      this.getHouseList();
    },
    mounted() {
      this.$nextTick(() => {
        this.getConfig();
        this.label = MDUtil.getQueryParam('label');
        this.tabList = document.getElementsByClassName('tab-list');
      });
      let container = document.getElementsByClassName('container')[0];
      window.addEventListener('scroll', () => {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // 判断是否滚动到底部
        if (scrollTop + document.documentElement.clientHeight >= container.offsetHeight) {
          if (this.sw) {
            this.page += 1;
            this.sw = false;
            this.getMoreHouseList();
          }
        }


        if (scrollTop > 100) {
          this.toTop = true;
        }
        else {
          this.toTop = false;
        }

      })
    },
    methods: {
      onSubmit(val, label) {
        let beforeUrl = document.URL.replace(/houseList/g, "houseList").split('?')[0];
        let toUrl = `${beforeUrl}?label=${label}&key=${val}`;
        this.showContent = true;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      },
      showSearch() {
        this.showContent = false;
        this.sendVal = this.inputVal;
        this.label = MDUtil.getQueryParam('label')
      },
      onCancel(val) {
        this.showContent = val;
      },


      selectListClick(index) {
        this.tabsIndex = index;
        this.showSelectContent = true;
        // if (this.click !== index) {
        //   this.showSelectContent = true;
        //   this.click = index;
        // } else {
        //   this.showSelectContent = false;
        //   this.click = -1;
        // }
      },
      hide() {
        this.showSelectContent = false;
      },
      areaChange() {
        if (this.checklistArea.length > 0 && this.checklistArea) {
          console.log(this.checklistArea);
          if (this.checklistArea[0] == '不限') {
            this.tabs[0] = '区域';
            this.tabList[0].classList.remove('red');
            this.showSelectContentfalse();
            this.quyu = '';
            this.getHouseList()
          } else {
            this.tabs[0] = this.checklistArea[0];
            this.tabList[0].classList.add('red');
            this.showSelectContentfalse();
            this.quyu = this.tabs[0];
            this.getHouseList()
          }
        }
      },
      priceChange() {
        if (this.checklistPrice.length > 0 && this.checklistPrice) {
          if (this.checklistPrice[0] == '不限') {
            this.tabs[1] = '价格';
            this.tabList[1].classList.remove('red');
            this.showSelectContentfalse();
            this.totalPrice = '';
            this.getHouseList();
          } else {
            this.tabs[1] = this.checklistPrice[0];
            this.tabList[1].classList.add('red');
            this.showSelectContentfalse();
            let str_totalPrice = this.tabs[1];
            console.log(str_totalPrice);
            if (str_totalPrice === '10万以下') {
              this.totalPrice = '0-9.9';
            } else if (str_totalPrice === '100万以上') {
              this.totalPrice = '100-1000000000';
            } else {
              this.totalPrice = str_totalPrice.substr(0, str_totalPrice.length - 1);
            }
            this.getHouseList();
          }
        }
      },
      mjChange() {
        if (this.checklistMJ.length > 0 && this.checklistMJ) {
          if (this.checklistMJ[0] == '不限') {
            this.tabs[2] = '面积';
            this.tabList[2].classList.remove('red');
            this.showSelectContentfalse();
            this.mianji = '';
            this.getHouseList();
          } else {
            this.tabs[2] = this.checklistMJ[0];
            this.tabList[2].classList.add('red');
            this.showSelectContentfalse();
            let str_mg = this.tabs[2];
            console.log(str_mg);
            if (str_mg === '50㎡以下') {
              this.mianji = '0-49.9';
            } else if (str_mg === '300㎡以上') {
              this.mianji = '300-10000';
            } else {
              this.mianji = str_mg.substr(0, str_mg.length - 1);
            }
            this.getHouseList();
          }

        }
      },
      hxChange() {
        if (this.checklistHx.length > 0 && this.checklistHx) {
          if (this.checklistHx[0] == '不限') {
            this.tabs[3] = '户型';
            this.tabList[3].classList.remove('red');
            this.showSelectContentfalse();
            this.huxing = '';
            this.getHouseList();
          } else {
            this.tabs[3] = this.checklistHx[0];
            this.tabList[3].classList.add('red');
            this.showSelectContentfalse();
            let str_huxing = this.tabs[3];
            if (str_huxing === '一室') {
              this.huxing = '1室'
            } else if (str_huxing === '两室') {
              this.huxing = '2室'
            } else if (str_huxing === '三室') {
              this.huxing = '3室'
            } else if (str_huxing === '四室') {
              this.huxing = '4室'
            } else if (str_huxing === '五室') {
              this.huxing = '5室'
            } else {
              this.huxing = '6室'
            }
            this.getHouseList();
          }

        }
      },
      getHouseList() {
        this.page = 1;
        this.$ajax.get(URI_GETHOUSELIST, {
          page: this.page,
          pageSize: this.pageSize,
          houseNew: MDUtil.getQueryParam('label'),
          key: this.inputVal,
          quyu: this.quyu,
          mianji: this.mianji,
          totalPrice: this.totalPrice,
          huxing: this.huxing
        }, res => {
          console.log(res.data);
          this.houseList = res.data.data;
          this.sw = true;
          this.show_no_more = false;
          if (res.data.data.length < this.pageSize) {
            this.show_no_more = false;
            this.sw = false;
          }
          //console.log(this.houseList);
        });
      },

      getMoreHouseList() {
        this.showLoading = true;
        this.$ajax.get(URI_GETHOUSELIST, {
          page: this.page,
          pageSize: this.pageSize,
          houseNew: MDUtil.getQueryParam('label'),
          key: this.inputVal,
          quyu: this.quyu,
          mianji: this.mianji,
          totalPrice: this.totalPrice,
          huxing: this.huxing
        }, res => {
          this.houseList = this.houseList.concat(res.data.data);
          this.showLoading = false;
          this.sw = true;
          if (res.data.data.length < this.pageSize) {
            this.sw = false;
            this.show_no_more = true;
          }
          console.log(this.houseList);
          //console.log(this.houseList);
        });
      },


      toDetails(id) {
        let toUrl = document.URL.replace(/findHouse\/houseList/g, "houseDetails").split('?')[0];
        toUrl += '?id=' + id;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      },
      /*common function*/
      showSelectContentfalse() {
        this.showSelectContent = false
      },

      /*goback*/
      toback() {
        //直接打开某个切面；返回不用能；就直接跳转首页、、、window.history.length=3
        if (window.history.length <= 3) {
          window.location.href = cdnBase + '/index.html';
        } else {
          window.history.go(-1);
        }

      },
      /***禁止滑动***/
      stop() {
        document.body.style.overflow = 'hidden';
        document.addEventListener("touchmove", mo, false);//禁止页面滑动
      },

      /***取消滑动限制***/
      move() {
        document.body.style.overflow = '';//出现滚动条
        document.removeEventListener("touchmove", mo, false);
      },
      getConfig() {
        //let url = location.href.split('#')[0] //获取锚点之前的链接
        this.$ajax.get(GETWXCONFIG, {
          url: encodeURIComponent(window.location.href)
        }, res => {
          this.wxInit(res)
        });
      },
      wxInit(res) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ']
        });
        wx.ready(function () {
          let shareObj = {
            title: '孝感瑞祥房产代理有限公司所有在售房源',
            desc: '现有真实在售二手房，帮您找到合适的房源，为准备买房的您提供真诚的服务',
            link: window.location.href,
            imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
          };
          //分享给朋友
          wx.onMenuShareAppMessage(shareObj);
          //分享到朋友圈
          wx.onMenuShareTimeline(shareObj);
          //分享到QQ
          wx.onMenuShareQQ(shareObj);
        })
      },
    }
  }
</script>
<style>
  body {
    background-color: #fff;
  }

  .vux-popup-dialog {
    background: #fff;
  }
</style>
<style lang="less" scoped>
  .checkerbox {
    width: 4.2rem;
  }

  .title-search {
    margin-top: .08rem;
    width: 100%;
    height: .56rem;
    .input-box {
      width: 100%;
      height: 100%;
      > input {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        border: none;
        background: #fff;
        padding-left: .15rem;
      }
    }
  }

  .search-btn {
    width: .88rem;
    height: .56rem;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background-color: #3492e9;
    margin-top: -.12rem;
  }

  .select-nav {
    height: .84rem;
    position: relative;
    z-index: 200;
    .tab-list {
      font-size: 14px;
      &.red {
        color: @red;
        .img-down {
          background: url('../../../static/img/icon-sort-down-active.png') no-repeat center center;
          background-size: contain;
        }
      }
      .img-down {
        display: inline-block;
        width: .18rem;
        height: .09rem;
        margin-left: .14rem;
        background: url('../../../static/img/icon-sort-down.png') no-repeat center center;
        background-size: contain;
      }
    }
  }

  .select_container {
    position: fixed;
    top: 0.84rem;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    z-index: 1;
  }

  .select_content {
    height: 4rem;
    background: #fff;
    position: absolute;
    top: 0.84rem;
    left: 0;
    width: 100%;
    transform: translate3d(0, -100%, 0);
    /*opacity: 0;*/
    z-index: 2;
    text-align: center;
  }

  .fade-in {
    animation: fadeIn .3s forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;

      transform: translate3d(0, -100%, 0);
    }

    to {
      opacity: 1;
      transform: none;
      //transform: translate3d(0, 0%, 0);
    }
  }

</style>

